<template>
  <div>
    <h1>树形菜单列表</h1>
    <el-form :inline="true" :model="listFrom" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input
          v-model="listFrom.keyWord"
          placeholder="请输入菜单名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="id" label="菜单id" sortable />
      <el-table-column prop="name" label="菜单名字" sortable />
      <el-table-column prop="path" label="菜单路径" sortable />
      <el-table-column prop="status" label="菜单状态" sortable>
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getTreeMenu } from "../api/api";
interface User {
  id: number;
  date: string;
  name: string;
  address: string;
  hasChildren?: boolean;
  children?: User[];
}
const tableData = ref([]);
const listFrom = ref({
  keyWord: "",
});
const list = () => {
  getTreeMenu(listFrom.value).then((res) => {
    tableData.value = res.data.data;
  });
};
onMounted(() => {
  list();
});
</script>
